<!--
@description    展示趋势和对比的漏斗视图
@author         秦俊强
@email          458112865@qq.com
@create         2021-06-11
-->

<template>
    <div class="funnelViewBox">

        <!-- 总转化率 -->
        <el-container>
            <el-aside width="360px">
                <!-- 总转化率 -->
                <div class="conversionRatesBox collectBox">
                    <div class="viewValBox">
                        <div>总转化率</div>
                        <div>{{ funnelReportResData.funnelDetail[0].completionRate }} %</div>
                    </div>

                    <img class="icon-arrow" src="../../../assets/img/arrow-down.png" />
                </div>
            </el-aside>

            <el-main style="padding-top: 10px;">
                <span style="color: #01b27a;">分组值: {{ byValues.name }}</span>
            </el-main>
        </el-container>

        <!-- 步骤 -->
        <div class="step" v-for="(item, i) in funnelReportResData.events" :key="i">
            <!-- 步骤 -->
            <el-container>
                <el-aside width="360px">
                    <div class="stepBox" style="width: 340px">
                        <span class="stepNum">{{ i + 1 }}</span>
                        <span class="stepTitle">{{ item.cname }}</span>


                        <el-popover
                                popper-class="popoverClass"
                                placement="top"
                                trigger="click">
                            <user-dialog :userDialogData="userDialogData" :step="'$ALL'" :sliceStep="i.toString()" :sliceByValues="[byValues]" :isViewFunnel="true"></user-dialog>
                            <el-button class="stepUser" type="text" slot="reference">{{ funnelReportResData.funnelDetail[0].overview[byValues.ind][i].convertedUser }} 人</el-button>
                        </el-popover>
                    </div>
                </el-aside>

                <!-- 柱图 -->
                <el-main style="background-color: #fafafa;">
                    <div class="stepBar" v-if="funnelReportResData.funnelDetail[0].overview[byValues.ind][i].conversionRate >= 0"
                         :style="{ width: funnelReportResData.funnelDetail[0].overview[byValues.ind][i].convertedUser*100/funnelReportResData.funnelDetail[0].overview[byValues.ind][0].convertedUser + '%' }"></div>

                    <div class="stepBar" v-if="funnelReportResData.funnelDetail[0].overview[byValues.ind][i].conversionRate < 0"
                         :style="{ width: '0%' }"></div>
                </el-main>
            </el-container>

            <!-- 向下箭头 -->
            <el-container class="arrow">
                <el-aside width="360px">
                    <!-- 转化率 -->
                    <div class="conversionRatesBox" v-if="(i + 1) < funnelReportResData.events.length">
                        <div class="viewValBox" v-if="funnelReportResData.funnelDetail[0].overview[byValues.ind][i].conversionRate >= 0">
                            <div>{{ funnelReportResData.funnelDetail[0].overview[byValues.ind][i+1].conversionRate }} %</div>
                        </div>

                        <div class="viewValBox" v-if="funnelReportResData.funnelDetail[0].overview[byValues.ind][i+1].conversionRate < 0">
                            <div style="color: #f7565e;">0 %</div>
                        </div>

                        <img class="icon-arrow" src="../../../assets/img/arrow-down.png" />
                    </div>

                </el-aside>

                <el-main></el-main>
            </el-container>
        </div>
    </div>
</template>




<script>
    /*用户弹框跳转组件*/
    import userDialog from "./userDialog";

  export default {

    name: 'view-funnel',

    props: {
      userDialogData: {
          type: Object
      },
      funnelReportResData: {},

      byValues: {
        type: Object,
        default: () => {
          return { ind: 0, name: '总体' };
        },
      }
    },

    data() {
      return {}
    },
      components: {
          userDialog
      },
    created() {},

    methods: {},
  }
</script>



<style>
    .popoverClass {
        padding: 0px !important;
        background: #000000;
    }
    .popper__arrow::after{
        border-top-color: #000000 !important;
    }
</style>
<style scoped lang="scss">

    #userDialog {

        padding: 5px 0;
        margin-top: -3px;
        z-index: 1070;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.4;

        .inner {
            width: 154px;
            padding: 3px 10px 10px;
            color: #EFF2F7;
            text-align: center;
            text-decoration: none;
            background: #000;
            border-radius: 4px;

            p {
                margin-block-start: 0rem;
                height: 32px;
                line-height: 30px;
                border: 1px solid #4B5259;
                border-radius: 3px;
                margin-bottom: 6px;
                font-size: 13px;
                cursor: pointer;
            }

            .close-area{
                text-align: right;
                height: 8px;
            }
            .viewUserPersona{
                height: 32px;
                line-height: 30px;
                border: 1px solid #4B5259;
                border-radius: 3px;
                margin-bottom: 6px;
                font-size: 13px;
                cursor: pointer;
            }
        }

    }

    .funnelViewBox {
        .el-container { margin-bottom: 10px; height: auto; }

        .conversionRatesBox {
            text-align: center;

            .viewValBox {
                width: 60px;
                background-color: #eaeff4;
                padding: 5px 0;
                margin: 0 auto -3px auto;
            }

            .icon-arrow { width: 100px; }
        }

        /* 总转化率 */
        .collectBox .viewValBox { width: 100px; }

        .stepBox {
            height: 28px;
            line-height: 26px;
            background-color: #fafafa;
            border: 1px solid #e7e7e7;

            .stepNum {
                display: inline-block;
                height: 17px;
                line-height: 17px;
                width: 17px;
                margin: 0 5px;
                text-align: center;
                vertical-align: middle;
                background: #c3e6d0;
                color: #2dca93;
            }

            .stepUser{
                line-height: 26px;
                float: right;
                padding: 0px 10px;
            }
        }
        .el-main {
            padding: 0;

            .stepBar {
                height: 30px;
                background-color: #57a3e3;
            }
        }
    }

    .el-container .el-main {
        text-align: center;
        background-color: transparent;
    }

</style>
